import React, { Component } from 'react';
import { Anchor } from 'antd';
import css from './Home.less';
import reactLogo from '../../assets/react.svg';
import antdLogo from '../../assets/antd.svg';

const { Link } = Anchor;

export default class Home extends Component {

  render() {
    return (
      <div>
        <article className={css.markdown}>
          <h1>Demo of React and Ant Design</h1>
          <article className={css.markdown}>
            <p>这里是React实现的demo，用了ant design的ui框架，用来帮助熟悉react开发模式</p>
          </article>
          <div className={css['pic-plus']}>
            <img width="150" src={antdLogo} />
            <span>+</span>
            <img width="150" src={reactLogo} />
          </div>
        </article>
        <section className={css.markdown}>
          <h2 id="版本">
            <span>版本</span>
            <a href="#版本" className={css.anchor}>#</a>
          </h2>
          <ul>
            <li>
              <p>开发版：0.0.1</p>
            </li>
          </ul>
        </section>
        <section className={css.markdown}>
          <h2 id="安装运行">
            <span>安装</span>
            <a href="#安装" className={css.anchor}>#</a>
          </h2>
          <h3>
            <span>使用 npm 安装</span>
            <a href="#使用-npm-安装" className={css.anchor}>#</a>
          </h3>
          <pre className="language-bash">
            <code>$ npm install</code>
          </pre>
          <h3>
            <span>使用 npm 运行</span>
            <a href="#使用-npm-运行" className={css.anchor}>#</a>
          </h3>
          <pre className="language-bash">
            <code>$ npm run dev</code>
          </pre>
        </section>
        <Anchor className={css['toc-affix']}>
          <Link href="#版本" title="版本" />
          <Link href="#安装运行" title="安装运行" />
        </Anchor>
      </div>
    );
  }
}
